<template>
    <div>
        <Col span="14" offset="4">
            <Form v-if="!formSubmitAlready">
                <FormItem label="您要拍卖的物品的名称">
                    <Input v-model="auction.auctionName">请输入您所需拍卖的物品名</Input>
                </FormItem>
                <FormItem label="您要拍卖的物品简介">
                    <Input type="textarea" v-model="auction.auctionBrief">请输入您的拍卖物品简介</Input>
                </FormItem>
                <FormItem label="请选择拍卖的标签">
                    <Select v-model="auction.auctionTag" style="width:260px">
                        <Option v-for="item in tags" :value="item.value" :key="item.key">{{ item.value }}</Option>
                    </Select>
                </FormItem>
                <FormItem label="您商品的起拍价格">
                    <InputNumber :min=10.00 :step=0.01 v-model="startPrice"></InputNumber>
                </FormItem>
                <FormItem label="您商品的最小加价额">
                    <InputNumber :min=1 :step=1 v-model="auction.minAddPrice"></InputNumber>
                </FormItem>
                <Tooltip content="这将帮助我们更好的推送您的产品">
                    您商品的拍卖地
                </Tooltip>
                <FormItem>
                    <Cascader :data="city" v-model="auctionCity"></Cascader>
                </FormItem>
                <FormItem>
                    <Row>
                        <Col>
                            <DatePicker type="date" placeholder="选择拍卖日期" v-model="auctionDate"
                                        style="width: 200px"></DatePicker>
                        </Col>
                        <Col>
                            <TimePicker type="time" placeholder="选择拍卖时间" v-model="auctionTime"
                                        style="width: 168px"></TimePicker>
                        </Col>
                    </Row>
                </FormItem>
                <Button type="primary" @click="submit">提交</Button>
            </Form>
        </Col>
        <div v-if="formSubmitAlready">
            <Card>
                <p slot="title">您已成功发起拍卖信息！您可以上传照片来吸引买家</p>
            </Card>
            <label>封面</label>
            <div>
                <Upload
                        v-if="reviewCover===''"
                        type="drag"
                        :format="['jpg','jpeg','png']"
                        :on-format-error="pictureFormatError"
                        :before-upload="beforeCoverUpload"
                        action="">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>单击或拖拽您的商品封面至此处</p>
                    </div>
                </Upload>
                <Row>
                    <img v-bind:src="reviewCover" style="height: 150px;width: auto">
                </Row>
                <Row v-if="reviewCover!==''">
                    <Button @click="uploadAuctionCover">确认上传</Button>
                    <Button @click="cancelUploadCover">取消上传</Button>
                </Row>
            </div>
            <label>商品详情</label>
            <div>
                <Upload
                        v-if="reviewPicture===''"
                        type="drag"
                        :format="['jpg','jpeg','png']"
                        :on-format-error="pictureFormatError"
                        :before-upload="beforePictureUpload"
                        action="">
                    <div style="padding: 20px 0">
                        <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                        <p>单击或拖拽您的商品封面至此处</p>
                    </div>
                </Upload>
                <Row>
                    <img v-bind:src="reviewPicture" style="height: 150px;width: auto">
                </Row>
                <Row v-if="reviewPicture!==''">
                    <Button @click="uploadAuctionPicture">确认上传</Button>
                    <Button @click="cancelUploadPicture">取消上传</Button>
                </Row>
            </div>
        </div>
    </div>
</template>

<script>
    import AuctionTag from "@/utils/AuctionTag";
    import city from "@/utils/city";
    import globalData from "@/utils/globalData";
    import axios from "axios";

    export default {
        name: "AuctionAdd",
        data() {
            return {
                formSubmitAlready: false,
                cover:'',
                picture:'',
                reviewCover: '',
                reviewPicture:'',
                confirmC:false,
                confirmP:false,
                auction: {
                    auctionName: '',
                    auctionBrief: '',
                    sellerId: globalData.USER.userId,
                    auctionTag: '',
                    auctionStartPrice: 0,
                    nowPrice: 0,
                    minAddPrice: 1,
                    auctionFinishPrice: 0,
                    auctionLocation: '',
                    auctionTimeStamp: ''
                },
                auctionId: '',
                auctionDate: '',
                auctionTime: '',
                auctionCity: "",
                startPrice: 10.00,
                tags: AuctionTag.tags,
                city: city.city
            }
        },
        methods: {
            cancelUploadPicture(){
                this.picture=''
                this.reviewPicture=''
            },
            cancelUploadCover() {
                this.cover = ''
                this.reviewCover = ''
            },
            beforeCoverUpload(file) {
                this.cover = file
                this.reviewCover=window.URL.createObjectURL(file)
                return false
            },
            beforePictureUpload(file) {
                this.picture = file
                this.reviewPicture=window.URL.createObjectURL(file)
                return false
            },
            pictureFormatError() {
                console.log("ERROR")
            },
            uploadAuctionCover() {
                let self = this
                // console.log(this.file)
                let formData = new FormData();
                formData.append("file", this.cover);
                axios({
                    method: 'post',
                    url: '/file/auc/auctionCover/' + this.auctionId,
                    data: formData
                }).then(function () {
                    self.$Notice.success({
                        title: "上传封面成功!"
                    })
                    self.confirmC=true
                    if(self.confirmP){
                        self.$router.replace("/AuctionShow")
                    }
                })
            },
            uploadAuctionPicture() {
                let self = this
                // console.log(this.file)
                let formData = new FormData();
                formData.append("file", this.picture);
                axios({
                    method: 'post',
                    url: '/file/auc/auctionPicture/' + this.auctionId,
                    data: formData
                }).then(function () {
                    self.$Notice.success({
                        title: "上传详情页成功!"
                    })
                    self.confirmP=true
                    if(self.confirmC){
                        self.$router.replace("/AuctionShow")
                    }
                })
            },
            submit() {
                let TStr = this.auctionDate.toString()
                this.auction.auctionTimeStamp = TStr.replace("00:00:00", this.auctionTime)
                let nowTime = new Date().getTime()
                let aucTime = new Date(this.auction.auctionTimeStamp).getTime()
                if ((aucTime - nowTime) < 3600000) {
                    this.$Notice.error({
                        title: '啊哦，拍卖的时间太早啦'
                    })
                    return;
                }
                this.auction.auctionTimeStamp = aucTime
                this.auction.auctionStartPrice = this.startPrice.toFixed(2)
                this.auction.auctionLocation = this.auctionCity[0] + this.auctionCity[1]
                let self = this
                axios({
                    method: 'post',
                    url: '/auction',
                    data: this.auction
                }).then(function (res) {
                    self.$Notice.success({
                        title: '添加拍卖品成功'
                    })
                    self.auctionId = res.data
                    self.formSubmitAlready = true
                    // self.$router.push('/AuctionCenter')
                })
            }
        }
    }
</script>

<style scoped>

</style>